@extends('layouts.admin.application')

@section('css')
    <link rel="stylesheet" href="/ace/assets/css/jquery-ui-1.10.3.full.min.css">
@endsection

@section('content')
    <div class="main-content">
        <div class="col-xs-12">
            <div class="breadcrumbs" id="breadcrumbs">
                <ul class="breadcrumb">
                    <li><i class="icon-home home-icon"></i><a href="{{ route('blog.gallery.index') }}">首页</a></li>
                    <li>我的相册</li>
                </ul>
            </div>

            @include('layouts.partials._flash')

            <div class="table-responsive">
                <div id="sample-table-2_wrapper" class="dataTables_wrapper" role="grid">
                    <div class="row">
                        <div class="col-sm-2">
                            <div id="sample-table-2_length" class="dataTables_length">
                                <a href="javascript:;" id="add_gallery"
                                   class="btn btn-sm btn-primary">创建相册</a>
                            </div>
                        </div>
                        <form>
                            <div class="col-sm-10">
                                <div class="dataTables_filter" id="sample-table-2_filter">

                                    <select data-am-selected="{btnSize: 'sm'}" name="type">
                                        <option value="-1" @if(Request::input('type') == '-1') selected @endif>选择主题</option>
                                        <option value="1" @if(Request::input('type') == '1') selected @endif>普通</option>
                                        <option value="2" @if(Request::input('type') == '2') selected @endif>亲子</option>
                                        <option value="3" @if(Request::input('type') == '3') selected @endif>旅游</option>
                                    </select>
                                    <label>
                                        <button type="submit" class="btn btn-xs btn-info" id="search">确定</button>
                                        <a href="{{route('blog.gallery.index')}}" class="btn btn-xs btn-default">重置</a>
                                    </label>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div class="row">
                        <div class="col-xs-12">
                            <div class="row-fluid">
                                <ul class="ace-thumbnails">

                                    @foreach($galleries as $gallery)
                                        <li data-id="{{$gallery->id}}">
                                            <a href="{{route('blog.photo.show', $gallery->id)}}" data-rel="colorbox">
                                                <img alt="150x150" style="width: 200px;height: 210px;"
                                                     src="{{$gallery->image}}">
                                                <div class="tags">
													<span class="label-holder">
														<span class="label label-info arrowed">{{$gallery->name}}</span>
													</span>

                                                    <span class="label-holder">
                                                        @if($gallery->type == 1)
                                                            <span class="label label-default">普通相册</span>
                                                        @elseif($gallery->type == 2)
                                                            <span class="label label-purple">亲子相册</span>
                                                        @else
                                                            <span class="label label-success">旅游相册</span>
                                                        @endif
													</span>
                                                </div>
                                            </a>

                                            <div class="tools tools-top">

                                                <a href="{{route('blog.gallery.edit', $gallery->id)}}">
                                                    <i class="icon-pencil"></i>
                                                </a>

                                                <a href="javascript:;">
                                                    <i class="icon-remove red del_one"></i>
                                                </a>
                                            </div>
                                        </li>
                                    @endforeach
                                </ul>
                            </div><!-- PAGE CONTENT ENDS -->
                        </div><!-- /.col -->
                    </div>
                </div>
            </div>
        </div>
    </div>


    {{--创建相册模态框--}}
    <div id="add-confirm" class="hide">
        <form class="form-horizontal" role="form" action="{{ route('blog.gallery.store') }}" method="post">

            {{csrf_field()}}

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right">相册名称：</label>

                <div class="col-sm-9">
                    <input type="text" name="name" placeholder="相册名称，你懂得~" class="col-xs-11 col-sm-11">
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right">相册描述：</label>

                <div class="col-sm-9">
                    <textarea name="description" cols="42" rows="4" placeholder="说说这个相册的故事..."></textarea>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right">相册封面图：</label>

                <div class="col-sm-9">
                    <div class="am-form-group am-form-file new_thumb">
                        <button type="button" class="btn-success upload_img" style="width: 120px;">
                            <i class="icon-cloud-upload" id="loading"></i> 上 传 美 照
                        </button>
                        <input type="file" id="image_upload" style="display: none;">
                        <input type="hidden" name="image">
                    </div>
                    <hr style="border-top:1px dashed #0066CC;">
                    <div>
                        <img src="" id="img_show" style="max-height: 200px;">
                    </div>
                </div>
            </div>

            <div class="form-group">
                <label class="col-sm-3 control-label no-padding-right">主题：</label>

                <div class="col-sm-9">
                    <div class="radio" style="">
                        <label>
                            <input name="type" type="radio" class="ace" value="1" checked>
                            <span class="lbl"> 普通</span>
                        </label>
                        <label>
                            <input name="type" type="radio" class="ace" value="2">
                            <span class="lbl"> 亲子</span>
                        </label>
                        <label>
                            <input name="type" type="radio" class="ace" value="3">
                            <span class="lbl"> 旅游</span>
                        </label>
                    </div>
                </div>
            </div>
            <div class="clearfix form-actions">
                <div class="col-md-offset-3 col-md-9">
                    <button class="btn btn-info" type="submit"><i class="icon-ok bigger-110"></i>保存</button>
                    &nbsp; &nbsp; &nbsp;
                    <a class="btn" href="{{route('blog.gallery.index')}}"><i
                                class="icon-undo bigger-110"></i>返回</a>
                </div>
            </div>
        </form>
    </div>
@endsection

@section('js')
    {{--模态框的宽度在下面这个文件的 2968 行设置--}}
    <script src="/ace/assets/js/jquery-ui-1.10.3.full.min.js"></script>
    <script src="/ace/assets/js/jquery.ui.touch-punch.min.js"></script>
    <script src="/vendor/html5-fileupload/jquery.html5-fileupload.js"></script>
    <script src="/js/upload.js"></script>
    <script src="/vendor/admin/js/gallery.js"></script>
@endsection